<template>
    <el-table :data="data" highlight-current-row style="width: 100%" @selection-change="selectChange">
        <el-table-column label="序号" type="index" width="80" align="center"> </el-table-column>
        <el-table-column v-for="item in formDefinition" :key="item.name" :prop="item.name" :label="item.title"
            :width="item.width" align="center">
            <template slot-scope="props">
                <div class="contentBox">
                    <el-image v-if="item.name === 'svg'" class="svg" :src="props.row[item.name]" :preview-src-list="svgList"></el-image>
                    <span v-else>{{ props.row[item.name] }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="220">
            <template slot-scope="scope">
                <el-button @click.native.prevent="downLoad(scope.row)" type="text" size="small">
                    下载BPMN
                </el-button>
                <el-button @click.native.prevent="updateRow(scope.row)" type="text" size="small">
                    修改
                </el-button>
                <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
  
<script>
export default {
    props: {
        //渲染组件使用的数据集
        data: {
            type: Array,
            required: false,
        },
        svgList:{
            type:Array,
            required: true
        },
        /**
         * 数据表格式定义
         * title: 数据表格的标题
         * name:  后端返回要渲染的字段名称
         * width: 当前数据占用列的宽度
         */
        formDefinition: {
            type: Array,
            required: true,
            default: [{ title: "标题", name: "field", width: "180" }]
        },
    },
    methods: {
        selectChange(row) {
            let ids = row.map(r => r.userId);
            this.$emit('optionRowIds', ids);
        },
        updateRow(scope) {
            let routerParams = scope;
            this.$router.push({ path: '/audit/auditManager/auditUpdate', query: { audit: routerParams } });
        },
        deleteRow(scope) {
            this.$emit('delBtn',scope)
        },
        checkBox() {

        },
        getUserState(state) {
            switch (state) {
                case 'ON_LINE':
                    return '在线';
                case 'OFF_LINE':
                    return '离线';
                case 'EXPIRATION':
                    return '过期';
                case 'FREEZE':
                    return '冻结';
                case 'REGISTER':
                    return '注册中';
            };
            return null;
        },
        downLoad(scope){
            this.$emit('downLoad',scope)
        }
    },
}
</script>
  
<style scoped lang="scss">
.el-table {
    margin-top: 18px;
    height: 70vh;

    .contentBox {
        position: relative;
        overflow: hidden;
    }

    .svg {
        position: relative;
        transform: translateY(-30%);
        width: 162px;
        height: 81px;
    }
}
</style>
  